<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<!-- 页面內容 -->
			<view class="grace-columns" :style="{background:yinhang.back_color}" style="margin: 20rpx 40rpx;width:670rpx;height:290rpx;box-shadow:0px 0px 15rpx 0px rgba(131,131,131,0.3);border-radius:10rpx;">
				<view class="grace-rows" style="margin-left: 36rpx;margin-top: 30rpx;">
					<image :src="yinhang.bank_icon_url" style="width: 50rpx;height: 50rpx;"></image>
					<view class="grace-columns" style="margin-left: 22rpx;position: relative; bottom: 7rpx;">
						<text style="font-size:30rpx;font-weight:400;color:rgba(255,255,255,1);">{{bankname}}（{{ banklast }}）</text>
						<image src="../../static/xinyongka.png" style="width: 60rpx;height: 22rpx;"></image>
					</view>
				</view>
				<!-- 白色横线 -->
				<view style="margin-top: 10rpx; width:598rpx;height:1rpx;background:rgba(247,247,247,1);margin-left: 36rpx;"></view>
				<!-- 卡信息 -->
				<view class="grace-space-between" style="margin: 20rpx 100rpx;">
					<view class="grace-columns" style="text-align: center;">
						<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">账单日</text>
						<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">{{bank.billing_day}}日</text>
					</view>
					<view class="grace-columns" style="text-align: center;">
						<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">还款日</text>
						<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">{{bank.repayment_date}}日</text>
					</view>
					<view class="grace-columns" style="text-align: center;">
						<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">已还金额</text>
						<text style="font-size:26rpx;font-weight:400;color:rgba(255,255,255,1);">{{back_price}}元</text>
					</view>
				</view>
				<!-- 计划信息 -->
				<view style="width:670rpx;height:80rpx;background:rgba(255,255,255,1);border-radius:10rpx;" class="grace-rows">
					<text :style="{color:rp_state==='已暂停' ?'rgba(204,41,14,1)':rp_state==='执行中' ?'rgba(0,255,0,255)':'rgba(86,86,86,255)'}"
					 style="margin-left: 45rpx; font-size:24rpx;font-weight:400;line-height: 80rpx;">{{ rp_state }}</text>
					<!-- 终止计划按钮 -->
					<button v-if="rp_state==='未执行'||rp_state==='执行中'" @tap="button_names==='终止计划'?showDialog3(plan_id): ''" style="position: relative;right: -140rpx; margin-top: 10rpx; line-height: 60rpx; width:180rpx;height:60rpx;border:2rpx solid rgba(79,159,254,1);border-radius:10rpx; font-size:30rpx;font-weight:400;color:rgba(79,159,254,1);">{{button_names}}</button>
					<!-- 终止计划按钮 -->

					<!-- 继续执行按钮 -->
					<button v-else @tap="huifujihua(plan_id)" style="position: relative;right: -140rpx; margin-top: 10rpx; line-height: 60rpx; width:180rpx;height:60rpx;border:2rpx solid rgba(79,159,254,1);border-radius:10rpx; font-size:30rpx;font-weight:400;color:rgba(79,159,254,1);">{{button_name}}</button>
					<!-- 继续执行按钮 -->
				</view>
			</view>


			<view>
				<view style="line-height: 60rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);margin-top: 2rpx;font-size:32rpx;font-weight:400;color:rgba(51,51,51,1);">
					<text style="margin-left: 25rpx;">计划截止日期：{{end_time}}</text>
				</view>
				<view style="line-height: 60rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);margin-top: 2rpx;font-size:32rpx;font-weight:400;color:rgba(51,51,51,1);">
					<text style="margin-left: 25rpx;">还款总金额：{{zong_money}}元</text>
				</view>
				<view style="line-height: 60rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);margin-top: 2rpx;font-size:32rpx;font-weight:400;color:rgba(51,51,51,1);">
					<text style="margin-left: 25rpx;">启动金额：{{rp_price}}元</text>
				</view>
				<view style="line-height: 60rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);margin-top: 2rpx;font-size:32rpx;font-weight:400;color:rgba(51,51,51,1);">
					<text style="margin-left: 25rpx;">还款笔数：{{num}}笔</text>
				</view>
				<view style="line-height: 60rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);margin-top: 2rpx;font-size:32rpx;font-weight:400;color:rgba(51,51,51,1);">
					<text style="margin-left: 25rpx;">周转金手续费：{{revolving_fund}}元</text>
				</view>
				<view style="line-height: 60rpx; width:750rpx;height:60rpx;background:rgba(255,255,255,1);margin-top: 2rpx;font-size:32rpx;font-weight:400;color:rgba(51,51,51,1);">
					<text style="margin-left: 25rpx; font-size:32rpx;font-weight:bold;color:rgba(51,51,51,1);">还款手续费：{{poundage}}元</text>
					<text v-show="is_coupon!=0" style="font-size:32rpx;font-weight:bold;color:rgba(153,153,153,1);">（已使用抵用券：{{ coupon }}元）</text>
				</view>
			</view>

			<!-- 计划详情信息 -->
			<view class="grace-rows" style="margin-top: 10rpx; line-height: 90rpx; width:750rpx;height:90rpx;background:rgba(255,255,255,1);">
				<view style="margin-left: 25rpx; font-size:32rpx;font-weight:400;color:rgba(79,159,254,1);">计划详情</view>
				<view style="margin: 0 20rpx; font-size: 30rpx; color:rgba(36,159,230,1);">|</view>
				<view style="font-size: 32rpx; color:#FF6600;">P</view>
				<view style="font-size: 32rpx; color:#4F9FFE;">lan</view>
				<view style="margin-left: 20rpx; font-size: 32rpx; color:#FF6600;">D</view>
				<view style="font-size: 32rpx; color:#4F9FFE;">etails</view>
			</view>

			<!-- 计划暂停时 -->
			<view v-if="rp_state==='已暂停'">
				<view class="yue">
					<text class="yue_buz">如本卡内可用额度不足， 请补完后点击继续执行</text>
					<view class="yue_ton" @tap="huifujihua(plan_id)" v-if="daojis">继续执行</view>
				</view>
				<view class="tixiang">
					<view style="width:696rpx;margin-left: 40rpx;">
						<text class="xinxi">计划已临时暂停，系统将在<i style="font-style: normal;font-weight: 700;">24小时</i>内自动恢复，不能自动恢复的计划将由工作人员与您联系处理，请耐心等待。</text>
					</view>
				</view>
			</view>
			<!-- 计划暂停时 -->

			<view v-for="(item1,index1) in child" :key="index1" class="grace-rows" style="margin-top: 4rpx; width:750rpx;height:100rpx;"
			 :style="{background:item1.types==='代还还款'?'rgba(255,235,218,1)':'rgba(255,255,255,1)'}">

				<!-- 状态 -->
				<view style=" margin: auto 15rpx; ">
					<view class="grace-columns">
						<image class="" :src="item1.types==='代还支付' && item1.rp_state==='成功' ? '../../static/jihua_yixiaofei.png' : item1.types==='代还还款' && item1.rp_state==='成功' ? '../../static/jihua_yihuankuan.png' : item1.types==='代还还款' ? '../../static/lanhuankuan.png' : item1.types==='代还支付' ? '../../static/weixiaofei.png':''"
						 style="width: 66rpx;height: 46rpx;"></image>
						<text style="font-size:22rpx;font-weight:400;text-align: center;" :style="{color:item1.rp_state==='成功' ? 'rgba(243,114,0,1)': item1.rp_state==='失败' ? 'rgba(255,0,0,255)':item1.types==='代还还款' &&(item1.rp_state==='待执行' || item1.rp_state==='已取消')?'rgba(129,185,255,1)' :'rgba(129, 129, 129, 255)'}">{{ item1.rp_state }}</text>
					</view>
				</view>

				<!-- 信息 -->
				<view class="grace-columns">
					<view class="grace-space-between" style="margin-top: 5rpx;">
						<text style="font-size:28rpx;font-weight:400;color:rgba(51,51,51,1);">金额：￥{{item1.money}}</text>
						<text v-show="item1.types!='代还还款'" style="font-size:22rpx;font-weight:400;color:rgba(153,153,153,1);">类型：{{ item1.mer_type }}</text>
					</view>
					<view style="margin-top: 8rpx; width:580rpx;height:1rpx;background:rgba(204,204,204,1);"></view>
					<view class="grace-space-between" style="margin-top: 8rpx;">
						<text v-show="item1.types!='代还还款'" style="font-size:22rpx;font-weight:400;color:rgba(102,102,102,1);">手续费：￥{{ item1.procedures }}</text>
						<!-- <text v-show="item1.types=='代还还款'" style="font-size:22rpx;font-weight:400;color:rgba(102,102,102,1);margin-left: 170rpx;"></text> -->
						<view>
							<image v-show="item1.rp_state !=='成功' " src="../../static/bianji.png" mode="" style="width: 30rpx;height: 30rpx;"
							 @tap="bianji(item1.id,item1.date,item1.times)"></image>
							<text style="font-size:22rpx;font-weight:400;color:rgba(51,51,51,1);">{{ item1.execution_time.date }}</text>
						</view>
						<view>

							<text style="font-size:22rpx;font-weight:400;color:rgba(153,153,153,1);">{{ item1.execution_time.time }}</text>
						</view>
					</view>
				</view>
				<view @tap="budan(item1.id)">
					<image v-show="(item1.is_bu==1&&item1.rp_state=='成功')||item1.rp_state=='补单'" src="../../static/daiti.png" mode="" style="width: 87rpx;height: 57rpx;position: absolute;right: 0;margin-top: 22rpx;"></image>

					<image v-show="item1.rp_state=='补单'" src="../../static/daiti.png" mode="" style="width: 87rpx;height: 57rpx;position: absolute;right: 0;margin-top: 22rpx;"></image>
					<text v-show="item1.rp_state=='补单'" style="position: absolute;right: 0;font-size: 26rpx;color: #FFFFFF;margin-top: 28rpx;margin-right: 10rpx;">补单</text>
				</view>
				<text v-show="item1.is_bu==1&&item1.rp_state=='成功'" style="position: absolute;right: 0;font-size: 26rpx;color: #FFFFFF;margin-top: 28rpx;margin-right: 20rpx;">OK</text>
			</view>
			<!-- 终止计划弹框 -->
			<graceDialog :isTitle="false" :show="show3" :isCloseBtn="false" width='500rpx'>
				<view class="content2" slot="content" style="text-align: center;">
					<text style="font-size: 26rpx;">确认终止该计划</text>
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closeDialog3">关闭</text>
					<text class="grace-dialog-buttons grace-blue" @tap="zhongzhijihua(plan_id)">确认</text>
				</view>
			</graceDialog>
			<!-- 终止计划弹框 -->
			<!-- 鉴权 -->
			<graceDialog :isTitle="false" :show="show4" :isCloseBtn="false" width='500rpx'>
				<view class="content2" slot="content" style="text-align: center;">
					<text style="font-size: 26rpx;">验证码已发送至您</text>
					<text style="font-size: 24rpx;">尾号{{ jianquans.yuliushouji }}的手机</text>
					<input @input="jianquanjianzhenma" style="margin-top: 20rpx; height: 80rpx; border-bottom:#B2B2B2 solid 2rpx"
					 placeholder="请输入验证码" />
				</view>
				<view slot="btns" class="grace-space-between">
					<text class="grace-dialog-buttons" @tap="closeDialog4">关闭</text>
					<text class="grace-dialog-buttons grace-blue" @tap="confirm4">确认</text>
				</view>
			</graceDialog>
			<!-- 鉴权 -->
			<!-- 修改时间弹框 -->
			<uni-popup ref="popup" type="center">
				<view class="popup">
					<view style="font-size: 28rpx;text-align: center;transform: translateY(20rpx);margin-bottom: 60rpx;">修改时间</view>
					<input @input="tiems" style="margin-top: 10rpx; height: 40rpx; border-bottom:#B2B2B2 solid 2rpx;text-align: center;padding: 0 30rpx;width: 400rpx;margin-left: 20rpx;"
					 placeholder="请输入日期时间" :value="tiem" />
					<view class="dianji">
						<text class="qr" @tap="sumbqr">确认</text>
						<text class="close" @tap="closes">取消</text>
					</view>
				</view>
			</uni-popup>
			<!-- 修改时间弹框 -->
			<ourLoading  active text="加载中..." v-if="loadings" />
		</view>
	</gracePage>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceDialog from '../../graceUI/components/graceDialog.vue';
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				plan_id: '', // 卡id
				create_time: "2020年01月1日", //创建时间
				end_time: "2020-01-1", //截止时间
				zong_money: 0, //还款总金额
				num: 0, //刷卡次数
				rp_price: 0, //启动资金
				poundage: 0, //手续费
				revolving_fund: "0", //周转金手续费
				back_price: 0, //已还金额
				stop_msg: null, //终止原因
				rp_state: "未执行", //执行状态
				state_stop: "无终止", //终止状态
				child: [], //子订单
				bank: {},
				bankname: '', //银行卡信息
				banklast: '', //银行卡信息
				yinhang: {}, //银行卡封面
				button_name: '暂停计划',
				button_names: '终止计划',
				is_coupon: 0, //是否使用优惠券
				coupon: 0, //抵扣券金额
				show3: false, //终止计划弹框是否显示
				show4: false, //鉴权弹框是否显示
				countdown: 0, //倒计时
				daojis: true,
				jianquans: {
					yuliushouji: '',
					order_num: '', //订单号
					sms_code: '' // 验证码
				},
				show5: false,
				tiem: '',
				id: '',
				loadings: false
			}
		},
		onLoad: function(opt) {
			console.log(opt);
			if (opt.id || opt.coupons !== 0) {
				this.plan_id = opt.id;
				this.coupon = opt.coupons
			} else {
				this.plan_id = uni.getStorageSync('jinpl')
			}

			this.get_info(this.plan_id);
			console.log(opt);
			this.count()
		},
		methods: {
			get_info(id) {
				var vm = this;
				vm.loadings = false
				vm.myPost(
					'api/agentrepayment/get_big_order_info', {
						id: vm.plan_id
					},
					function(res) {
						console.log(res.data);
						vm.loadings = false
						if(res.code == 200){
							vm.child = res.data.child;
							vm.bankname = res.data.card_info.name;
							vm.banklast = res.data.card_info.bc_bank_number.last;
							vm.bank = res.data.card_info;
							vm.end_time = res.data.end_time;
							vm.zong_money = res.data.bill_money;
							vm.num = res.data.num;
							vm.rp_price = res.data.rp_price;
							// vm.poundage = res.data.poundage;
							// vm.revolving_fund = res.data.orders.revolving_fund;
							vm.back_price = res.data.back_price;
							vm.stop_msg = res.data.stop_msg;
							vm.rp_state = res.data.rp_state;
							// vm.state_stop = res.data.orders.state_stop;
							vm.yinhang = res.data.card_info.bankinfo;
							// vm.is_coupon = res.data.orders.is_coupon, //是否使用优惠券
								// vm.coupon = res.data.orders.coupon //抵扣券金额
							// vm.countdown = res.data.orders.restart_time
							if (vm.rp_state === '已暂停') {
								vm.button_name = '继续执行';
							} else {
								vm.count()
							}
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							vm.loadings = false
						}
						

					}
				);
				this.count()
			},
			// 修改时间
			bianji(id, date, item) {
				this.open()
				this.tiem = date + ' ' + item
				this.id = id
				console.log(id, date, item);

			},
			tiems(e) {
				console.log(e);
				this.tiem = e.detail.value
			},
			// 确认修改时间
			sumbqr() {
				var vm = this
				vm.req.post(
					vm.lochost + '/mytrunk/shanfu/change_times', {
						id: vm.id,
						time: vm.tiem
					}, {},
					function(res) {
						console.log(res);
						if (res.code == 200) {
							vm.close()
							vm.msg_show(res.msg)
							setTimeout(function() {
								vm.get_info(vm.plan_id);
							}, 1000)
						}
					}
				)
			},
			closes() {
				this.$refs.popup.close()
			},
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			// 补单按钮
			budan(id) {
				var vm = this;
				uni.showModal({
					title: '提示',
					content: '是否确认进行补单？',
					success: function(res) {
						if (res.confirm) {
							vm.req.mypost(
								vm.lochost + '/mytrunk/shanfu/budan', {
									id: id
								},
								function(res) {
									if (res.code == 200) {
										vm.jianquan()
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
									}
									console.log(res);
								}
							)
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			//终止计划按钮
			zhongzhijihua(id) {
				var vm = this;
				vm.myPost(
					'api/agentrepayment/stop_big_order', {
						id: id
					}, 
					function(res) {
						if (res.code == 200) {
							uni.navigateBack({
								delta: 1
							})
							setTimeout(function() {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							},500);
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}

					}
				)
			},

			zantingjihua(id) {
				var vm = this;
				vm.req.post(
					vm.lochost + '/mytrunk/repaymentplan/suspend_refund', {
						id: this.plan_id
					}, {},
					function(res) {
						setTimeout(function() {
							vm.msg_show(res.msg)
						}, 500);
						// vm.Back(1);
						vm.Goto('/pages/card_keeper/card_keeper')
					}
				)
			},
			// 补单鉴权
			jianquan() {
				var vm = this
				vm.req.mypost(
					vm.lochost + '/mytrunk/mypassageway/channel_authentication', {
						card: vm.plan_id,
						types: '1,2'
					},
					function(res) {
						var data = res.data;
						console.log(data);
						if (data.is_need_SMS || data.is_need_SMS === 0) {
							var is_need_SMS = res.data.is_need_SMS;
							if (is_need_SMS === 0) {
								// uni.navigateTo({
								// 	url:'/pages/preview_plan/preview_plan'
								// })
								vm.get_info(vm.plan_id);
							} else if (is_need_SMS === 1) {
								vm.order_num = res.data.order_num;
								vm.yuliushouji = res.data.phone;
								vm.showDialog4()
							} else if (is_need_SMS === 2) {
								vm.Goto('/pages/web_view/web_budview?url=' + res.data.url);
							}
						} else {
							vm.get_info(vm.plan_id);
							// uni.navigateTo({
							// 	url:'/pages/preview_plan/preview_plan'
							// })
						}

					}
				)
			},
			// 继续执行按钮
			huifujihua(id) {
				var vm = this;
				vm.req.mypost(
					vm.lochost + '/mytrunk/repaymentplan/continue_work', {
						id: this.plan_id
					},
					function(res) {
						setTimeout(function() {
							vm.msg_show(res.msg)
						}, 500);
						if (res.code == 200) {
							var is_need_SMS = res.data.is_need_SMS;
							if (is_need_SMS === 0) {
								that.yijianquan = 1;
								vm.get_info(vm.plan_id);
							} else if (is_need_SMS === 1) {
								that.yijianquan = 1;
								that.show4 = true
								that.jianquan.yuliushouji = res.data.phone

							} else if (is_need_SMS === 2) {
								that.yijianquan = 1;
								uni.redirectTo({
									url: '/pages/souxin_view/souxin_view?url=' + res.data.url
								});
							}
							vm.count()
						} else {
							vm.get_info(vm.plan_id);
						}
					}
				)
				vm.daojis = false
			},
			//鉴权验证码输入
			jianquanjianzhenma(res) {
				var value = res.detail.value;
				this.jianquans.sms_code = value;
			},
			// 显示鉴权验证码输入框
			showDialog4: function() {
				this.show4 = true;
			},
			// 关闭鉴权输入框
			closeDialog4: function() {
				this.show4 = false;
			},
			// 验证码输入框选择了确认
			confirm4: function() {
				if (this.jianquans.yanzhengma === '') {
					this.msg_show('请输入验证码')
				} else {
					var vm = this;
					this.req.post(
						this.lochost + '/mytrunk/mypassageway/confirm_channel_authentication', {
							order_num: this.jianquans.order_num,
							sms_code: this.jianquans.yanzhengma,
						}, {},
						function(res) {
							vm.closeDialog4();
							vm.msg_show(res.msg);
							setTimeout(function() {
								vm.get_info(vm.plan_id)
							}, 500);
						}
					)
				}

			},
			// 显示终止计划确认框
			showDialog3: function(plan_id) {
				this.plan_id = plan_id;
				this.show3 = true;
			},
			// 关闭终止计划确认框
			closeDialog3: function() {
				this.show3 = false;
			},
			// 倒计时
			count() {
				var vm = this
				if (vm.countdown > 0) {
					var $h = parseInt(vm.countdown / 3600); //24
					var $m = parseInt(vm.countdown % 3600 / 60)
					var $s = (vm.countdown % 3600) % 60;
					if ($h < 10) {
						$h = '0' + parseInt($h);
					}
					if ($m < 10) {
						$m = '0' + parseInt($m);
					}
					if ($s < 10) {
						$s = '0' + parseInt($s);
					}
					vm.button_name = $h + ':' + $m + ':' + $s;
					vm.button_names = $h + ':' + $m + ':' + $s;
					vm.countdown--;
					setTimeout(function() {
						vm.count();
					}, 1000)
				} else {
					vm.button_name = vm.button_name
					vm.button_names = vm.button_names
				}

			}
		},
		components: {
			gracePage,
			graceDialog,
			uniPopup
		}
	}
</script>

<style>
	.popup {
		width: 500rpx;
		height: 250rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.dianji {
		position: absolute;
		bottom: 10rpx;
		margin-left: 70rpx;
	}

	.close {
		font-size: 35rpx;
		margin-left: 240rpx;
	}

	.qr {
		font-size: 35rpx;

	}

	.content2 {
		padding: 30rpx;
		line-height: 50rpx;
	}

	.grace-dialog-buttons {
		width: 700rpx;
		line-height: 88rpx;
		height: 88rpx;
		display: block;
		overflow: hidden;
		text-align: center;
		font-size: 26rpx;
		color: #999999;
	}

	.yue {
		width: 100%;
		height: 60rpx;
		background-color: #FFFFFF;
		margin-top: 10rpx;
	}

	.yue_buz {
		font-size: 24rpx;
		color: #999999;
		margin-left: 12rpx;
		line-height: 60rpx;
	}

	.yue_ton {
		float: right;
		width: 160rpx;
		height: 40rpx;
		border-radius: 10rpx;
		font-size: 25rpx;
		line-height: 40rpx;
		margin-right: 10rpx;
		margin-top: 8rpx;
		border: 1rpx solid rgba(79, 159, 254, 1);
		text-align: center;
		color: rgba(79, 159, 254, 1);
	}

	.tixiang {
		width: 100%;
		height: 270rpx;
		background-color: #F05E07;
		margin-bottom: 10rpx;
	}

	.xinxi {
		width: 348rpx;
		font-size: 48rpx;
		color: #FFFFFF;
		font-family: PingFang-SC-Regular !important;
		font-weight: 500;
	}
</style>
